
<template>
  <div class="home">
    <Header />
    <Banner />
    <div class="con">
      <div class="cistern">
        <ul>
          <li v-for="(item, index) in lists" :key="index">
            <router-link class="box" :to="item.link">
              <div class="pic"></div>
              <div class="text">
                <p>{{item.text}}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/header.vue";
import Banner from "../components/banner.vue";
export default {
  name: "home",
  components: {
    Banner,
    Header
  },
  data() {
    return {
      tabList: "",
      acitveIndex: 0,
      articleList: "",
      lists:[
        {
          link:"/list",
          text:"html常见问题"
        },
        {
          link:"/list",
          text:"css常见问题"
        },
        {
          link:"/list",
          text:"js常见问题"
        },
        {
          link:"/list",
          text:"node常见问题"
        }
      ]
    };
  },
  async asyncData({ $axios }) {
    return await $axios
      .get(`/article/list/${encodeURI("热门推荐")}`)
      .then(({ data }) => {
        let tabList = ["热门推荐"];
        data.forEach(element => {
          tabList.push(element.type);
        });
        // 数组去重
        tabList = Array.from(new Set(tabList));

        // 反转数据
        data.reverse();

        return {
          tabList: tabList,
          articleList: data
        };
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    // 点击tab切换，获取数据
    getDataList(item, index) {
      // 设置当前tab标红
      this.acitveIndex = index;
      // 获取数据
      this.$axios
        .get(`/article/list/${encodeURI(item)}`)
        .then(({ data }) => {
          // 反转数据
          data.reverse();
          this.articleList = data;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
@import "../assets/css/base.less";

.home {
  .con {
    padding: 50px 0;
    ul {
      li {
        width: 25%;
        float: left;
        .box {
          margin: 0 10px;
          display: block;
          position: relative;
          overflow: hidden;
          .pic {
            height: 200px;
            background: @ch;  
          }
          .text {
            font-size: 20px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 42%;
            width: 100%;
            height: 100%;
          p {
            color: @cf;
          }
          }
        }
      }
    }
  }
}
</style>
